'use strict';  /*eslint comma-spacing: 0, no-unused-vars: 0 */ /*global earcut:false */
/**
 * 在网页上面画图的逻辑 
 * 从html中找到对应的标签元素后，取出
 * 定义画布，
 * 根据数据生成相应的元素
 * 画相应的元素
 * 生成画
 */

//               ===================== 取元素进行修改
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

// step 1 : 定义多边形
var points = [50,50, 200,50, 300,100, 350,250, 250,350, 100,300, 50,150, 50,50];
var trianglesIndex = earcut(points);

var polygon = getPolygon(points);
var triangles = getTriangles(polygon,trianglesIndex);



// step 2 :在多边形中画点
const MAX_NUMBER_OF_POINTS = 500;
const numberOfPoints = Math.floor(1*MAX_NUMBER_OF_POINTS);

// =画布
canvas.width = window.innerWidth;
canvas.height = 400;

// =画背景
ctx.clearRect(0,0,canvas.width,canvas.height);
// =画多边形
drawPolygon(ctx,polygon,'black',true);
// =画点
drawPoint(ctx,numberOfPoints,triangles);


